<template>
	<view class="good-box m-b-25 p-20 bg-white radius-15">
		<view class="title-box" v-if="props.data.lookTitle == 'true'">
			<view class="title-icon">
				<text class="tit">{{ props.data.title }}</text>
			</view>
			<view v-if="props.data.lookMore == 'true'">
				<coreshop-view-more @hanldeClickViewMore="hanldeClickViewMore" />
			</view>
		</view>
		<!-- 列表平铺 -->
		<view v-if="props.data.display == 'list'" :class="['data-box', `data-box-${props.data.column}`]">
			<view v-for="cell, cellIndex in goodsState.goodsList" :key="cellIndex" class="waterfall-box">
				<view v-for="item, index in cell" :key="index" :class="['card-box', `card-box-${props.data.column}`]">
					<coreshop-goods-card :type="props.data.column == 1 ? 'horizontal' : 'vertical'"
						:imgHeight="hanlderGoodsWidth()" :imgWidth="hanlderGoodsWidth()"
						:goodsData="hanldeCombinationGoodsData(item)" @hanldeClickGoods="hanldeClickGoods">
						<template #goodPrice>
							<view class="price-msg" v-if="props.data.column == 1" @click="hanldeClickGoods(item)">
								<view class="tag-box">
									<view class="tag tag-buy">已售{{ item.buyCount }}{{ item.unit }}</view>
									<view class="tag tag-view">{{ item.viewCount }}人访问</view>
								</view>
								<view class="price-box">
									<view class="price">
										<text class="symbol">￥</text>
										<text class="num">{{ item.price }}</text>
									</view>
									<view class="btn">立即购买</view>
								</view>
							</view>
							<view class="price-msg" v-else @click="hanldeClickGoods(item)">
								<view class="price-box">
									<view class="price">
										<text class="symbol">￥</text>
										<text class="num">{{ item.price }}</text>
										<text class="mktprice" v-if="props.data.column == 2">￥{{ item.mktprice }}</text>
									</view>
									<view class="buyCount">已售{{ item.buyCount }}{{ item.unit }}</view>
								</view>
								<Point :data="item" :flex="false"></Point>
							</view>
						</template>
						<template #other v-if="props.data.column == 1">
							<Point :data="item" :flex="true"></Point>
						</template>
					</coreshop-goods-card>
				</view>
			</view>
		</view>
		<!-- 横向滚动 -->
		<view v-else :class="['swiper-box', `swiper-box-${props.data.column}`]">
			<swiper class="swiper" :indicator-dots="true" indicator-active-color="#D33123">
				<swiper-item v-for="cell, cellIndex in goodsState.goodsList" :key="cellIndex"
					:class="['card-box', `card-box-${props.data.column}`]">
					<view class="item-box" v-for="item, index in cell" :key="index">
						<coreshop-goods-card type="vertical" :imgHeight="hanlderGoodsWidth()"
							:imgWidth="hanlderGoodsWidth()" :goodsData="hanldeCombinationGoodsData(item)"
							@hanldeClickGoods="hanldeClickGoods">
							<template #goodPrice>
								<view class="price-msg" @hanldeClickGoods="hanldeClickGoods">
									<view class="price-box">
										<view class="price">
											<text class="symbol">￥</text>
											<text class="num">{{ item.price }}</text>
										</view>
										<view class="buyCount">已售{{ item.buyCount }}{{ item.unit }}</view>
									</view>
								</view>
							</template>
						</coreshop-goods-card>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, onMounted } from 'vue';
	import Point from './point.vue';
	import { handleRouteNavigateTo, toDimensionArray, splitArrayByStep } from '@/core/utils';

	const props = withDefaults(defineProps<{
		data : any,
	}>(), {
		data: {}
	});

	const goodsState = reactive<{
		goodsList : Array<any>;
	}>({
		goodsList: [],
	})

	onMounted(() => {
		if (props.data.display == 'slide') { // 横向滚动数据处理
			goodsState.goodsList = toDimensionArray(props.data.list.slice(0, props.data.limit), props.data.column);
		} else { // 列表瀑布流数据处理
			goodsState.goodsList = splitArrayByStep(props.data.list.slice(0, props.data.limit), props.data.column);
		}
	})

	// 组合商品数据传入组件
	const hanldeCombinationGoodsData = (item : any) => {
		return {
			id: item.id,
			image: item.image,
			name: item.name,
			brief: item.brief,
			price: item.price,
			mktprice: item.mktprice,
			isRecommend: item.isRecommend,
			isHot: item.isHot,
		}
	}

	// 根据返回的列数返回商品的图片宽高
	const hanlderGoodsWidth = () => {
		if (props.data.column == 3) {
			return '180rpx'
		}
		if (props.data.column == 2) {
			return '295rpx'
		}
	}

	const hanldeClickViewMore = () => {
		handleRouteNavigateTo('/pages/category/category')
	}

	const hanldeClickGoods = (data : any) => {
		handleRouteNavigateTo(`/pages/goods/detail?id=${data?.id}`)
	}
</script>
<style lang="scss" scoped>
	@import './home-goods.scss';
</style>